﻿<div id="bookings">
    <h2>Bookings
    </h2>
    <h3 data-bind="visible: bookings().length == 0">You haven't made any bookings yet!</h3>
    <ul data-bind="foreach: bookings()">
        <li>
            <div>
                <span class="actionButton" data-bind="click: bookingClick, text: date()"></span>
            </div>
            <ul class="booking" data-bind="slideVisible: expanded(), foreach: tickets()">
                <li>
                    <div>
                        <span data-bind="text: 'Name: ' + name()"></span>
                    </div>
                    <div>
                        <span data-bind="text: 'Passport: ' + passport()"></span>
                    </div>
                    <div>
                        <span data-bind="text: 'Class: ' + seat().seatClass()"></span>
                    </div>
                    <div>
                        <span data-bind="text: 'Seat: ' + seat().seat()"></span>
                    </div>
                    <div>
                        <span data-bind="text: 'Cost: ' + seat().cost() + '$'"></span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
